<script setup>
import {onMounted, ref} from "vue";
import StudentItem from "@/components/student-item.vue";
import {useStudentStroes} from "@/stores/modules/studentStroes.js";

const studentStroes = useStudentStroes()
const toSearch = () => {
  uni.navigateTo({
    url: '/pages/index/search'
  })
}

const stuList = ref([])
const add = () => {
  uni.navigateTo({
    url: '/subpackage/add/index'
  })
}

onMounted(() => {
  stuList.value = studentStroes.studentList
})

</script>

<template>
  <scroll-view class="container">
    <view class="search">
      <view class="search-box" @click="toSearch">
        <up-input
            fontSize="32rpx"
            placeholder="请输入关键字搜索"
            prefix-icon="search"
            prefix-icon-style="font-size:40rpx;"
            shape="circle"></up-input>
      </view>
      <up-button custom-style="width:150rpx;margin-left:10rpx;background:#2E6BF8;" shape="circle" text="批量添加"
                 type="primary" @click="add"></up-button>
    </view>

    <view class="list">
      <up-collapse
          accordion
          custom-style="background:#fff;"
      >
        <view v-for="item in 10" :key="item" class="item-wrap">
          <up-collapse-item
              :key="item"
              border
              name="atr"
              title="艺术学院 （2023）"
          >
            <student-item :stu-list="stuList"></student-item>
          </up-collapse-item>
        </view>
      </up-collapse>
    </view>
  </scroll-view>
</template>

<style lang="scss">
.container {
  padding: 30rpx;
  width: 100vw;
  background-color: #f3f5f9;

  .search {
    display: flex;

    .search-box {
      width: 550rpx;
      border-radius: 30rpx;
      background: #FFFFFF;
    }
  }

  .list {
    margin-top: 20rpx;

    .item-wrap {
      margin: 20rpx 0;
      background-color: #fff;
      border-radius: 40rpx;
    }
  }
}
</style>